import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import Mask from '@/components/Mask'
import RangeSlider from '@/components/RangeSlider'
import './index.scss'
const MaskScore = (props) => {
    const { visible, onChange, active, onClose, defaultData = [] } = props
    const { detail = [] } = visible
    const [list, setList] = useState([])
    useEffect(() => {
        if (visible) {
            setList(detail)
        }
        else {
            setList([])
        }
    }, [visible])
    return <Mask closeBtn={false} {...props}>
        <View className='MaskScore_box'>
            <View className='MaskScore_content'>
                <View className='MaskScore_title_box'>
                    分数区间
                </View>
                <View className='MaskScore_desc_box'>
                    <View className='MaskScore_desc_content'>
                        <RangeSlider
                            min={defaultData[0]}
                            max={defaultData[1]}
                            step={1}
                            defaultValue={list}
                            onChange={(values) => setList(values)}
                        />
                    </View>
                    <View onClick={() => setList(defaultData)} className='MaskScore_desc_reload'>


                    </View>

                </View>
                <View className='MaskScore_btn_height'>
                    <View onClick={onClose} className='MaskScore_btn_info'>
                        取消
                    </View>
                    <View onClick={() => {
                        onChange && onChange({
                            lowestScoreStart: list[0],
                            lowestScoreEnd: list[1]
                        })
                        onClose()
                    }} className='MaskScore_btn_info1'>
                        确定
                    </View>
                </View>
            </View>
        </View>
    </Mask >

}
export default MaskScore